<template>
	<div class="headBar">
		<div class="head-list">
			<ul>
				<li v-bind:class="{changeColor: changeColorFlag0}" v-on:mouseover="here" v-on:mouseout="changeColorFlag0=false">客户服务&nbsp;&nbsp;<span class="down-arrow"></span></li>
				<li v-bind:class="{changeColor: changeColorFlag1}" v-on:mouseover="changeColorFlag1=1" v-on:mouseout="changeColorFlag1=false">卖家中心&nbsp;&nbsp;<span class="down-arrow"></span></li>
				<li v-bind:class="{changeColor: changeColorFlag2}" v-on:mouseover="changeColorFlag2=true" v-on:mouseout="changeColorFlag2=false" class="design">开始设计</li>
				<li v-bind:class="{changeColor: changeColorFlag3}" v-on:mouseover="changeColorFlag3=true" v-on:mouseout="changeColorFlag3=false" class="li-car"><span class="car"></span><span class="car-text">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;购物车</span></li>
				<li v-bind:class="{changeColor: changeColorFlag4}" v-on:mouseover="changeColorFlag4=true" v-on:mouseout="changeColorFlag4=false">我的订单</li>
				<li v-bind:class="{changeColor: changeColorFlag5}" v-on:mouseover="changeColorFlag5=true" v-on:mouseout="changeColorFlag5=false"><span>注册</span> <span>登陆</span></li>
				<li v-bind:class="{changeColor: changeColorFlag6}" v-on:mouseover="changeColorFlag6=true" v-on:mouseout="changeColorFlag6=false" class="li-first">首页</li>
			</ul>
		</div>
		<div class="head-search">
			<router-link to="/">
				<img src="../assets/logo.png" alt="logo" class="logo" />
			</router-link>
			<div class="search-box">
				<div class="search-content">
					<select name="search-kind">
						<option value="goods" selected="selected">搜商品</option>
						<option value="shops">搜店铺</option>
					</select>
					<input type="text" name="" id="" value="" placeholder="搜索商品和店铺" />
					<div class="search-icon"><span></span></div>
				</div>
				<div class="search-keywords">
					<a href=""><span>动漫</span></a>
					<a href=""><span>篮球</span></a>
					<a href=""><span>美剧</span></a>
					<a href=""><span>足球</span></a>
					<a href=""><span>哲学</span></a>
					<a href=""><span>dota</span></a>
					<a href=""><span>火影</span></a>
				</div>
			</div>

			<div class="erweima">
				<img src="../assets/erweima.png" alt="erweima" />
				<span>手机逛UDZ</span>
			</div>
		</div>
	</div>
</template>

<script>
	export default {

		data(){
			return{
//				changeColorFlag: [0, 0, 0, 0, 0, 0, 0],
				changeColorFlag0:false,
				changeColorFlag1:false,
				changeColorFlag2:false,
				changeColorFlag3:false,
				changeColorFlag4:false,
				changeColorFlag5:false,
				changeColorFlag6:false,
			}
		},
		methods:{
			here: function(){
				this.changeColorFlag0=true;
				console.log(this.changeColorFlag0);
			},
		},
	}
</script>

<style lang="less" rel="stylesheet/less">
	.headBar {
		font-family: "微软雅黑";
		font-size: 10px;
		.head-list {
			width: 1200px;
			height: 2rem;
			width: 100%;
			background-color: #f2f2f2;
			border-bottom: 1px solid #e1e1e1;
			margin: 0 auto;
			ul {
				display: block;
				width: 1200px;
				height: 2rem;
				margin: 0 auto;
				padding: 0;
				li {
					/*padding: 0;*/
					border-left: 1px solid #e1e1e1;
					list-style: none;
					line-height: 2rem;
					float: right;
					padding: 0 18px;
					cursor: pointer;  
					transition-property: color;
					transition-duration: 0.3s;
					transition-timing-function: ease;
					&.changeColor{
						color: #afa4bd;
					}
				}
				.li-first {
					border: none;
				}
				.li-car {
					position: relative;
				}
				.car {
					position: absolute;
					width: 18px;
					height: 16px;
					margin-top: 8px;
					display: inline-block;
					background: url(../assets/icon.png) no-repeat;
					background-position: 0 -30px;
					/*margin-top: 5px;*/
				}
				.design {
					color: red;
				}
				.down-arrow {
					display: inline-block;
					background: url(../assets/icon.png) no-repeat;
					background-position: 0 -83px;
					width: 14px;
					height: 16px;
				}
			}
		}
		.head-search {
			position: relative;
			width: 1200px;
			height: 90px;
			margin: 0 auto;
			padding-top: 40px;
			.logo {
				float: left;
			}
			.erweima {
				position: absolute;
				right: 0;
				top: 10px;
				text-align: center;
				img {
					width: 90px;
					height: 90px;
					display: block;
				}
			}
			.search-box {
				text-align: center;
				.search-content {
					width: 490px;
					height: 34px;
					border: 1px solid black;
					font-size: 0;
					/*margin: 40px auto 0 auto;*/
					margin: 0 auto;
					/*padding: 40px;*/
					select {
						border: none;
						height: 32px;
						width: 60px;
						font-size: 12px;
					}
					input {
						width: 350px;
						height: 32px;
						border: none;
						/*padding: 0;*/
						font-size: 12px;
					}
					.search-icon {
						/*font-size: 12px;*/
						width: 80px;
						height: 34px;
						background-color: black;
						float: right;
						span {
							display: inline-block;
							background: url(../assets/icon.png) no-repeat;
							background-position: 0 -60px;
							width: 30px;
							height: 30px;
							/*margin: 0 auto;*/
							margin-left: 25px;
						}
					}
				}
				.search-keywords {
					width: 490px;
					margin: 10px auto 0 auto;
					a {
						margin-right: 20px;
						color: #999;
						text-decoration: none;
						&:hover {
							text-decoration: underline;
						}
					}
				}
			}
		}
	}
</style>